{% extends "kjs/rainbow/layouts/main.html" %}

{% block common_css %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/kjssoft/rainbow/album/sample.css"/>
    <style type="text/css">
        div#rainbow_albums_widget {
            padding:20px;
            background:url("{{ STATIC_URL }}commons/background/8f1f1_background.png");
        }
        img {
            display:block;
        }
    </style>
{% endblock %}

{% block rainbow_body %}
    <div id="rainbow_albums_widget" style="margin:0 auto;">
        <div style="float:right;">
            <div class="rainbowAlbumsNavWidget">
            </div>
            <div class="rainbowAlbumsWidget"></div>
        </div>
        <div class="rainbowAlbumUserProfilePanel" style="width:300px;min-height:600px;">
            {% include "kjs/rainbow/album/widgets/_user_profile_widget.html" %}
        </div>
    </div>
{% endblock %}

{% block common_script %}
    {{ block.super }}
    {% include "kjs/rainbow/album/widgets/common/_common_javascript.html" %}
    <script type="text/javascript">
        $(document).ready(function(){
            $(this).kjsuiLoad("autoSizeWidget");
            var lineWidget = 300;
            var marginWidth = 300;
            var rainbowWidget = $("div#rainbow_albums_widget");
            var rainbowAlbumsWidget = rainbowWidget.find("div.rainbowAlbumsWidget");
            var endFunc = function(ui){
                var w = marginWidth + ui.width();
                rainbowWidget.css({
                    width:w,
                    minWidth:w,
                    maxWidth:w
                });
                ui.parent().css({
                    width:ui.width()
                });
            };
            rainbowAlbumsWidget.kjsAutoSizeWidget({
                width:$(window).width() * 0.9 - marginWidth,
                lineWidth:lineWidget,
                end:endFunc
            });

            $(window).resize(function(){
                var win = $(this);
                rainbowAlbumsWidget.kjsAutoSizeWidget("reset", {
                    width:win.width() * 0.9 - marginWidth,
                    lineWidth:lineWidget,
                    end:endFunc
                });
            });

            var albumLoadUrls =[
                {% for album in album_list %}
                    "/rainbow/album/{{ album.id }}/of/user/{{ album.user.id }}/show?format=sample"{% if not forloop.last %},{% endif %}
                {% endfor %}
            ];
            albumLoadUrls.reverse();
            var albumInterval = window.setInterval(function(){
                var albumLoadUrl = albumLoadUrls.pop();
                if (!$.isEmptyObject(albumLoadUrl)) {
                    var div = $("<div/>");
                    div.load(albumLoadUrl, function(){
                        var albumWidget = $(this);
                        rainbowAlbumsWidget.kjsAutoSizeWidget("addCell", albumWidget);
                        albumWidget.css("opacity",0);
                        var snapshotWidgets = albumWidget.find("div.rainbowAlbumPhotoSnapshotWidget");
                        for (var i=0; i<snapshotWidgets.size(); i++) {
                            var snapshotWidget = $(snapshotWidgets.get(i));
                            snapshotWidget.kjsLoadingWidget();
                        }
                        albumWidget.animate({opacity:1}, 1000);
                    });
                } else {
                    window.clearInterval(albumInterval);
                }
            }, 500);

        });
    </script>
{% endblock %}